<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
        <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/snapshotcontrol' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            
            function initialize() {
              // add control
              var snapShotControl = new SnapShotControl();
              
              directionsDisplay = new google.maps.DirectionsRenderer();
              var chicago = new google.maps.LatLng(41.850033, -87.6500523);
              var myOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago
              }
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
              directionsDisplay.setMap(map);
              snapShotControl.setMap(map);
            }
            
            function calcRoute() {
              var start = document.getElementById("start").value;
              var end = document.getElementById("end").value;
              var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              };
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  directionsDisplay.setDirections(response);
                }
              });
            }
        </script>
    </head>
    <body onload="initialize();calcRoute();">
        <div>
            <b>Start: </b>
            <select id="start" onchange="calcRoute();">
                <option value="chicago, il" selected>Chicago</option>
                <option value="st louis, mo">St Louis</option>
                <option value="joplin, mo">Joplin, MO</option>
                <option value="oklahoma city, ok">Oklahoma City</option>
                <option value="amarillo, tx">Amarillo</option>
                <option value="gallup, nm">Gallup, NM</option>
                <option value="flagstaff, az">Flagstaff, AZ</option>
                <option value="winona, az">Winona</option>
                <option value="kingman, az">Kingman</option>
                <option value="barstow, ca">Barstow</option>
                <option value="san bernardino, ca">San Bernardino</option>
                <option value="los angeles, ca">Los Angeles</option>
            </select>
            <b>End: </b>
            <select id="end" onchange="calcRoute();">
                <option value="chicago, il">Chicago</option>
                <option value="st louis, mo" selected>St Louis</option>
                <option value="joplin, mo">Joplin, MO</option>
                <option value="oklahoma city, ok">Oklahoma City</option>
                <option value="amarillo, tx">Amarillo</option>
                <option value="gallup, nm">Gallup, NM</option>
                <option value="flagstaff, az">Flagstaff, AZ</option>
                <option value="winona, az">Winona</option>
                <option value="kingman, az">Kingman</option>
                <option value="barstow, ca">Barstow</option>
                <option value="san bernardino, ca">San Bernardino</option>
                <option value="los angeles, ca">Los Angeles</option>
            </select>
        </div>
        <div id="map_canvas">
        </div>
    </body>
</html>
